<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="线路编号" prop="routeNumber">
        <el-input
          v-model="queryParams.routeNumber"
          placeholder="请输入线路编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="线路名称" prop="routeName">
        <el-input
          v-model="queryParams.routeName"
          placeholder="请输入线路名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="起始站点ID" prop="startStationId">
        <el-input
          v-model="queryParams.startStationId"
          placeholder="请输入起始站点ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="终点站点ID" prop="endStationId">
        <el-input
          v-model="queryParams.endStationId"
          placeholder="请输入终点站点ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="线路总站点数" prop="totalStations">
        <el-input
          v-model="queryParams.totalStations"
          placeholder="请输入线路总站点数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="线路总距离(公里)" prop="routeDistance">
        <el-input
          v-model="queryParams.routeDistance"
          placeholder="请输入线路总距离(公里)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预估行程时间(分钟)" prop="estimatedDuration">
        <el-input
          v-model="queryParams.estimatedDuration"
          placeholder="请输入预估行程时间(分钟)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="线路状态" prop="isActive">
        <el-select
          v-model="queryParams.isActive"
          placeholder="请选择线路状态"
          clearable
          style="width: 240px">
          <el-option label="运营中" :value="1"></el-option>
          <el-option label="停运" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['bus:routes:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['bus:routes:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['bus:routes:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['bus:routes:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="routesList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="线路编号" align="center" prop="routeNumber" width="100" />
      <el-table-column label="线路名称" align="center" prop="routeName" />
      <el-table-column label="起始站点" align="center" prop="startStationName">
        <template slot-scope="scope">
          <span>{{ scope.row.startStationName || '未设置' }}</span>
          <span v-if="scope.row.startStationId" style="color: #909399; font-size: 12px;">({{ scope.row.startStationId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="终点站点" align="center" prop="endStationName">
        <template slot-scope="scope">
          <span>{{ scope.row.endStationName || '未设置' }}</span>
          <span v-if="scope.row.endStationId" style="color: #909399; font-size: 12px;">({{ scope.row.endStationId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="线路总站点数" align="center" prop="totalStations">
        <template slot-scope="scope">
          <span v-if="scope.row.totalStations && scope.row.totalStations > 0">
            {{ scope.row.totalStations }} 个站点
          </span>
          <span v-else style="color: #909399;">未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="线路总距离(公里)" align="center" prop="routeDistance" />
      <el-table-column label="预估行程时间(分钟)" align="center" prop="estimatedDuration" />
      <el-table-column label="线路状态" align="center" prop="isActive">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isActive === 1 ? 'success' : 'danger'">
            {{ scope.row.isActive === 1 ? '运营中' : '停运' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后更新时间" align="center" prop="updatedAt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleViewRoute(scope.row)"
            style="color: #409eff;"
          >线路详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['bus:routes:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['bus:routes:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改公交线路基础信息，存储各条公交线路的基本配置和运营参数对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="线路编号" prop="routeNumber">
          <el-input v-model="form.routeNumber" placeholder="请输入线路编号" />
        </el-form-item>
        <el-form-item label="线路名称" prop="routeName">
          <el-input v-model="form.routeName" placeholder="请输入线路名称" />
        </el-form-item>
        <el-form-item label="起始站点" prop="startStationId">
          <el-select v-model="form.startStationId" placeholder="请选择起始站点" clearable style="width: 100%">
            <el-option
              v-for="station in stationsList"
              :key="station.id"
              :label="station.stationName"
              :value="station.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终点站点" prop="endStationId">
          <el-select v-model="form.endStationId" placeholder="请选择终点站点" clearable style="width: 100%">
            <el-option
              v-for="station in stationsList"
              :key="station.id"
              :label="station.stationName"
              :value="station.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="线路站点配置">
          <div style="margin-bottom: 10px;">
            <el-button type="primary" size="small" @click="showStationSelector">配置线路站点</el-button>
            <span v-if="selectedStations.length > 0" style="margin-left: 10px; color: #909399;">已选择 {{selectedStations.length}} 个站点</span>
          </div>
        </el-form-item>
        <el-form-item label="线路总站点数" prop="totalStations">
          <el-input v-model="form.totalStations" placeholder="系统自动计算" readonly />
        </el-form-item>
        <el-form-item label="线路总距离(公里)" prop="routeDistance">
          <el-input v-model="form.routeDistance" placeholder="请输入线路总距离(公里)" />
        </el-form-item>
        <el-form-item label="预估行程时间(分钟)" prop="estimatedDuration">
          <el-input v-model="form.estimatedDuration" placeholder="请输入预估行程时间(分钟)" />
        </el-form-item>
        <el-form-item label="线路状态" prop="isActive">
          <el-select v-model="form.isActive" placeholder="请选择线路状态" style="width: 100%">
            <el-option label="运营中" :value="1"></el-option>
            <el-option label="停运" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 站点选择对话框 -->
    <el-dialog title="配置线路站点" :visible.sync="stationDialogVisible" width="800px" append-to-body>
      <station-selector
        :stations-list="stationsList"
        :selected-stations="selectedStations"
        @confirm="handleStationSelection"
        @cancel="stationDialogVisible = false">
      </station-selector>
    </el-dialog>

    <!-- 线路详情对话框 -->
    <el-dialog :title="`线路详情 - ${currentRouteDetail.routeNumber || ''} ${currentRouteDetail.routeName || ''}`" :visible.sync="routeDetailVisible" width="900px" append-to-body>
      <div class="route-detail-container">
        <!-- 基本信息 -->
        <el-card class="route-basic-info" shadow="never">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold; color: #303133;">基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">线路编号：</span>
                <span class="info-value">{{ currentRouteDetail.routeNumber }}</span>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="info-item">
                <span class="info-label">线路名称：</span>
                <span class="info-value">{{ currentRouteDetail.routeName || '未设置' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">起始站点：</span>
                <span class="info-value">{{ currentRouteDetail.startStationName || '未设置' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">终点站点：</span>
                <span class="info-value">{{ currentRouteDetail.endStationName || '未设置' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">线路状态：</span>
                <el-tag :type="currentRouteDetail.isActive === 1 ? 'success' : 'danger'" size="mini">
                  {{ currentRouteDetail.isActive === 1 ? '运营中' : '停运' }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">总站点数：</span>
                <span class="info-value">{{ currentRouteDetail.totalStations || 0 }} 个</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">线路距离：</span>
                <span class="info-value">{{ currentRouteDetail.routeDistance || 0 }} 公里</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">预估时长：</span>
                <span class="info-value">{{ currentRouteDetail.estimatedDuration || 0 }} 分钟</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 站点详情 -->
        <el-card class="route-stations-info" shadow="never" style="margin-top: 15px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold; color: #303133;">
              线路站点详情
              <el-tag size="mini" style="margin-left: 10px;">共 {{ currentRouteStations.length }} 个站点</el-tag>
            </span>
          </div>

          <div v-if="currentRouteStations.length === 0" class="empty-stations">
            <el-empty description="该线路暂未配置站点" :image-size="120"></el-empty>
          </div>

          <div v-else class="stations-timeline">
            <div
              v-for="(station, index) in currentRouteStations"
              :key="station.id"
              class="station-item"
              :class="{ 'is-first': index === 0, 'is-last': index === currentRouteStations.length - 1 }">

              <div class="station-order">
                <span class="order-number">{{ station.stationOrder }}</span>
              </div>

              <div class="station-content">
                <div class="station-name">{{ station.stationName }}</div>
                <div class="station-details">
                  <span class="detail-item">
                    <i class="el-icon-location"></i>
                    距起点 {{ station.distanceFromStart || 0 }} 公里
                  </span>
                  <span class="detail-item">
                    <i class="el-icon-time"></i>
                    预估 {{ station.estimatedArrivalTime || 0 }} 分钟
                  </span>
                </div>
              </div>

              <div v-if="index < currentRouteStations.length - 1" class="station-connector"></div>
            </div>
          </div>
        </el-card>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="routeDetailVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRoutes, getRoutes, delRoutes, addRoutes, updateRoutes } from "@/api/bus/routes"
import { listStations } from "@/api/bus/stations"
import { listRouteStations, addRouteStations, delRouteStations, delRouteStationsByRouteId, batchSaveRouteStations } from "@/api/bus/route-stations"
import StationSelector from "./components/StationSelector"

export default {
  name: "Routes",
  components: {
    StationSelector
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公交线路基础信息，存储各条公交线路的基本配置和运营参数表格数据
      routesList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        routeNumber: null,
        routeName: null,
        startStationId: null,
        endStationId: null,
        totalStations: null,
        routeDistance: null,
        estimatedDuration: null,
        isActive: null
      },
      // 表单参数
      form: {},
      // 站点列表
      stationsList: [],
      // 选中的站点列表
      selectedStations: [],
      // 站点选择对话框
      stationDialogVisible: false,
      // 线路详情对话框
      routeDetailVisible: false,
      // 当前查看的线路信息
      currentRouteDetail: {},
      // 当前线路的站点列表
      currentRouteStations: [],
      // 表单校验
      rules: {
        routeNumber: [
          { required: true, message: "线路编号不能为空", trigger: "blur" }
        ],
        startStationId: [
          { required: true, message: "请选择起始站点", trigger: "change" }
        ],
        endStationId: [
          { required: true, message: "请选择终点站点", trigger: "change" }
        ],
      }
    }
  },
  created() {
    this.getList()
    this.getStationsList()
  },
  methods: {
    /** 查询公交线路基础信息，存储各条公交线路的基本配置和运营参数列表 */
    getList() {
      this.loading = true
      listRoutes(this.queryParams).then(response => {
        this.routesList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询站点列表 */
    getStationsList() {
      listStations({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.stationsList = response.rows || []
      })
    },
    /** 显示站点选择器 */
    showStationSelector() {
      this.stationDialogVisible = true
    },
    /** 处理站点选择 */
    handleStationSelection(stations) {
      console.log('接收到站点配置:', stations)
      this.selectedStations = stations
      this.form.totalStations = stations.length
      // 自动设置起始和终点站点
      if (stations.length > 0) {
        this.form.startStationId = stations[0].stationId || stations[0].id
        this.form.endStationId = stations[stations.length - 1].stationId || stations[stations.length - 1].id
      }
      this.stationDialogVisible = false
      this.$message.success(`已配置 ${stations.length} 个站点`)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        routeNumber: null,
        routeName: null,
        startStationId: null,
        endStationId: null,
        totalStations: null,
        routeDistance: null,
        estimatedDuration: null,
        isActive: 1
      }
      this.resetForm("form")
      this.selectedStations = []
    },
    /** 加载线路站点数据 */
    loadRouteStations(routeId) {
      listRouteStations({ routeId: routeId, pageNum: 1, pageSize: 1000 }).then(response => {
        const stations = response.rows || []
        this.selectedStations = stations.sort((a, b) => a.stationOrder - b.stationOrder)
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加公交线路基础信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getRoutes(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改公交线路基础信息"
        // 加载线路站点数据
        this.loadRouteStations(id)
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRoutes(this.form).then(async response => {
              try {
                // 无论有没有站点都调用保存，如果没有站点就清空关联
                await this.saveRouteStations(this.form.id)
                this.$modal.msgSuccess("修改成功")
                this.open = false
                this.getList()
              } catch (error) {
                // 站点保存失败，但线路信息已更新
                this.$modal.msgWarning("线路信息更新成功，但站点配置保存失败，请重新配置站点")
                this.open = false
                this.getList()
              }
            }).catch(error => {
              console.error('更新线路失败:', error)
            })
          } else {
            addRoutes(this.form).then(async response => {
              const routeId = response.data?.id || response.id
              if (routeId) {
                try {
                  // 无论有没有站点都调用保存，如果没有站点就清空关联
                  await this.saveRouteStations(routeId)
                  this.$modal.msgSuccess("新增成功")
                  this.open = false
                  this.getList()
                } catch (error) {
                  // 站点保存失败，但线路已创建，提示用户
                  this.$modal.msgWarning("线路创建成功，但站点配置保存失败，请编辑线路重新配置站点")
                  this.open = false
                  this.getList()
                }
              } else {
                this.$modal.msgError("线路创建失败，未获取到线路ID")
              }
            }).catch(error => {
              console.error('创建线路失败:', error)
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除公交线路基础信息，存储各条公交线路的基本配置和运营参数编号为"' + ids + '"的数据项？').then(function() {
        return delRoutes(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 查看线路详情按钮操作 */
    async handleViewRoute(row) {
      try {
        this.currentRouteDetail = row
        // 获取该线路的所有站点信息
        const response = await listRouteStations({ routeId: row.id, pageNum: 1, pageSize: 1000 })
        let stations = response.rows || []

        // 按站点顺序排序
        stations.sort((a, b) => a.stationOrder - b.stationOrder)

        // 关联站点名称
        this.currentRouteStations = stations.map(station => {
          const stationInfo = this.stationsList.find(s => s.id === station.stationId)
          return {
            ...station,
            stationName: stationInfo ? stationInfo.stationName : '未知站点'
          }
        })

        this.routeDetailVisible = true
      } catch (error) {
        console.error('获取线路详情失败:', error)
        this.$modal.msgError('获取线路详情失败')
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('bus/routes/export', {
        ...this.queryParams
      }, `routes_${new Date().getTime()}.xlsx`)
    },
    /** 保存线路站点关联数据 */
    async saveRouteStations(routeId) {
      try {
        console.log('开始批量保存站点关联，路线ID:', routeId)
        console.log('要保存的站点:', this.selectedStations)

        if (this.selectedStations.length === 0) {
          // 如果没有选择站点，就清空该线路的所有站点关联
          await batchSaveRouteStations(routeId, [])
          console.log('已清空线路站点关联')
          return
        }

        // 构造批量保存的数据
        const stationsData = this.selectedStations.map((station, index) => ({
          stationId: station.stationId || station.id,
          distanceFromStart: station.distanceFromStart || 0,
          estimatedArrivalTime: station.estimatedArrivalTime || 0
          // routeId 和 stationOrder 在后端设置
        }))

        console.log('发送批量保存请求:', stationsData)
        await batchSaveRouteStations(routeId, stationsData)
        console.log('站点关联批量保存成功')
      } catch (error) {
        console.error('保存线路站点关联失败:', error)
        this.$modal.msgError('保存站点关联失败：' + (error.message || '未知错误'))
        throw error // 重新抛出错误，让调用方知道保存失败
      }
    }
  }
}
</script>

<style scoped>
/* 线路详情样式 */
.route-detail-container {
  max-height: 600px;
  overflow-y: auto;
}

.info-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.info-label {
  color: #606266;
  font-size: 13px;
  min-width: 80px;
}

.info-value {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

/* 站点时间轴样式 */
.stations-timeline {
  position: relative;
  padding: 0;
}

.station-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-left: 10px;
}

.station-order {
  position: relative;
  z-index: 2;
  margin-right: 20px;
  flex-shrink: 0;
}

.order-number {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.station-item.is-first .order-number {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

.station-item.is-last .order-number {
  background: linear-gradient(135deg, #f56c6c, #f89898);
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.station-content {
  flex: 1;
  min-width: 0;
}

.station-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.station-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.detail-item i {
  margin-right: 5px;
  color: #909399;
}

/* 站点连接线 */
.station-connector {
  position: absolute;
  left: 26px;
  top: 32px;
  width: 2px;
  height: calc(100% + 8px);
  background: linear-gradient(to bottom, #e4e7ed, #f0f2f5);
  z-index: 1;
}

.station-item:last-child .station-connector {
  display: none;
}

/* 空状态样式 */
.empty-stations {
  text-align: center;
  padding: 40px 0;
}

/* 卡片样式优化 */
.route-basic-info .el-card__header,
.route-stations-info .el-card__header {
  background-color: #fafbfc;
  border-bottom: 1px solid #e4e7ed;
}

.route-basic-info .el-card__body,
.route-stations-info .el-card__body {
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .station-details {
    flex-direction: column;
    gap: 8px;
  }

  .order-number {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }

  .station-connector {
    left: 24px;
  }
}
</style>
